<template>
	<view class="dot-main" :class="'type' + type"><view :class="['dot-item', current == index ? 'active' : '']" v-for="(item, index) in list" :key="index"></view></view>
</template>
<style>
.dot-main {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20upx;
	position: absolute;
	bottom: 10upx;
	left: 0;
}
.dot-item {
	width: 10upx;
	height: 10upx;
	background: rgba(255, 255, 255, 0.6);
	margin: 0 6upx;
	box-sizing: border-box;
	border-radius: 100%;
}
.dot-main.type2 .dot-item,
.dot-main.type3 .dot-item {
	width: 10upx;
	height: 10upx;
	background: rgba(33, 183, 146, 0.2);
}
.dot-main.type3 .dot-item {
	background: rgba(102, 186, 91, 0.2);
}
.active {
	background: #fff;
}
.dot-main.type2 .dot-item.active {
	background: #21b792;
}
.dot-main.type3 .dot-item.active {
	background: #7ec262;
}
</style>
<script>
export default {
	props: { current: { type: Number }, list: { type: Number, default: 2 }, type: { type: Number, default: 0 } }
};
</script>
